Skip to main content
Version: 5.3

Customizations

The following section describes which parts of the application can be customized.

Colors of calendar overview

It is possible to define different colors for the leave types (flexi time, annual leave, sickness etc.) To do this you need an additional .css-file, which can be created with any text editor This file must be named: Calendar.custom.css and saved in the folder c:\Program Files\TimePunch\TimePunch Calendar\Content.

You can copy the following css classes to this file:

.FlexiTime {

background: orange;

}

.AnnualLeave {

background: gold;

}

.Sickness {

background: turquoise;

}

.SicknessNotPaid {

background: cadetblue;

}

.IdleTime {

background: plum;

}

.PublicHoliday {

background: hotpink;

}

.Weekend {

background: gainsboro;

}

.Pending {

background: limegreen;

}

.Absent {

background: cornflowerblue;

}

.BusinessTrip {

background: purple;

}

.Cancelled {

background: url("../images/cancelled.png");

}

.Default {

background: \#FFFFFF;

}

.Worktime {

background: \#FFFFFF;

}

.Placeholder{

background: url("../images/placeholder.png");

}

To change a color you have to assign the hex value of the color to the background property of the appropriate .css class.

Example: If you like to change the color for flexi time to black you need to amend the class .FlexiTime like this:

.FlexiTime {

background: \#000000;

}

In the following table you can see which leave type belongs to which .css class:

AntragstypCss-Klasse
Flexi time.FlexiTime
Annual leave.AnnualLeave
Sick leave.Sickness
Sick leave (not paid).SicknessNotPaid
Idle time.IdleTime
Public holiday.PublicHoliday
weekend.Weekend
pending.Pending
absent.Absent
Business trip.BusinessTrip
cancelled.Cancelled

If you would like to change the color for working time too, you have to amend the class .WorkTime.

You don’t have to update all .css classes. If you only want to change the color for flex time than you just copy this class to the file Calendar.custom.css.